let service = require("./service");

let util=require("../../util/util"),
    formateData=util.formateData;

function toPercent(value){
  return parseFloat(value*100).toFixed(2)+"%"
}

import Vue from 'vue'

// import ElementUI from 'element-ui'
import {
  Select,
  Option,
  Input,
  Radio,
  RadioGroup,
  RadioButton,
  Menu,
  Submenu,
  Button,
  ButtonGroup,
  Alert,
  Dialog,
  Table,
  TableColumn
} from 'element-ui'
let crypto=require("crypto");

// Vue.use(ElementUI)
Vue.use(Table);
Vue.use(TableColumn);

var app=new Vue({
  el:"#view-main",
  data:{
    demoData:{
      data:[{
        "guid":"f74f1695-41a8-49bb-a7c6-e739624fcf04",
        "name":"first_name",
        "gender":"F",
        "age":23,
        "describe":"I am a student",
        "image_name":"1.jpeg",
        "status":"shuaidao",
        "time":"2019-02-26T02:53:03.00Z"
      },{
        "guid":"6709a9e4-b92c-488e-940c-ddc5f3dbe056",
        "name":"second_name",
        "gender":"M",
        "age":24,
        "describe":"I am a teacher",
        "image_name":"1.jpeg",
        "status":"shuaidao",
        "time":"2019-02-26T02:53:03.00Z"
      }]
    }
  },
  methods:{
    smallimgClick: function(e) {        
        let el=e.target;
        $(".bigimg").css({
            height:$(e.target).height()*4,
            width:$(e.target).width()*4
        });

        $(".mask").fadeIn();        
        $(".bigimg").attr("src", $(e.target).attr("src")).fadeIn()
    },
    maskClick: function(){
        $(".mask").fadeOut();
        $(".bigimg").fadeOut();
    },
    isNull:isNull,
    toDecimal:function(x){
        var f = parseFloat(x); 
        if (isNaN(f)) { 
        return; 
        } 
        f = Math.round(x*100)/100; 
        return f; 
    }
  },
  delimiters: ['${', '}']
});

app.$watch('searchKeyWords',function(newVal,oldVal){
  if(newVal===""){
    app.alertVisible=false;
  }
});

Vue.filter('highlight', function(words, query){
  if(!isNull(words)){
    return words.replace(query, '<span class=\'highlight\'>' + query + '</span>')  
  }
});
Vue.filter('toFloat',function(value,n){
  return isNull(value)?'0.00':parseFloat(value).toFixed(n);
});

function isNull(str){
  if((str=='')||(str==null)||(str=="NULL")||(str==undefined)||(str==0)){
    return true;
  }else{
    return false;
  }
}

function getQueryColumn(mapping){
  let queryColumnSet=new Set();
  for(let x in mapping){
    queryColumnSet.add(mapping[x]);
  }
  let queryColumn=queryColumnSet;
  return queryColumn;
}

let personnalMapping = {
    guid:"guid",
    name:"name",
    gender:"gender",
    age:"age",
    describe:"describe"
}

let dangersAlert = {
    guid:"guid",
    name:"name",
    time:"time",
    status:"status",
    imagename:"image_name",
    gender:"gender",
    age:"age",
    describe:"describe"
}

function getDangersAlertData(){
    let queryColumn = {
        queryColumn:getQueryColumn(dangersAlert)
    };
    service.queryDangersAlertData(queryColumn)
        .then(function(result){
            for(let i = result.length -1; i>=0;i--){
                result[i].image_name = "../dest/images/" + result[i].image_name;
                result[i].time = formateData.formateDateH(result[i].time);
            }
            app.demoData.data=result;
        })
}

let intervalHourData=setInterval(getDangersAlertData,1000);

// function getDataFromDataBase(){
//     let queryColumn={
//         queryColum:getQueryColumn(personnalMapping)
//     };
//     service.queryPersonnalData(queryColumn)
//         .then(function(result){
//             for(let i = result.length - 1;i>=0; i--){
//                 result[i].
//             }        
//             app.demoData.data=result;
//         })
// }

// let intervalHourData=setInterval(getDataFromDataBase,1000);

function initPage(){
    getDangersAlertData();
}

window.app=app;
initPage();
